
import React from 'react';
import cs from 'classnames';
import sty from './sty.module.css';
import { memo } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';



import { Dropdown, Menu } from 'antd';
import { changeIsShow } from '@/components/theme-login/store/actionCreator';

import { DownOutlined, DragOutlined } from '@ant-design/icons';
import SearchBox from './child/searchBox';
import ThemeLogin from '@/components/theme-login'

import { headerLinks } from '@/common/local-data'
import { NavLink } from 'react-router-dom';

const AppHeader = () => {
  const dispatch = useDispatch();
  const { isLogin, profile } = useSelector(state => ({
    isLogin: state.getIn(['loginState', 'isLogin']),
    profile: state.getIn(['loginState', 'profile'])
  }), shallowEqual);
  const menu = isLogin ? (<Menu >
    <Menu.Item key='2'>4</Menu.Item>
    <Menu.Item key='4'>466</Menu.Item>
    <Menu.Item key='6'>47</Menu.Item>
  </Menu>) : '';
  const len = headerLinks.length - 1;

  return <div className={cs(sty.root)}>

    <div className='wrap2  flex4'>
      <div className={cs(sty.left, 'flex2')}>
        <h1 className='sprite_01'>
          <a href="/">网易云音乐</a>
        </h1>
        <div className={sty.headerGroup}>
          {
            headerLinks.map((v, i) => {
              return <NavLink to={v.link}
                key={v.link}
                className={cs(sty.headerItem, { hotIcon: i === len })}
                activeClassName='linkAct'
              >{v.title}
                <i className="icon"></i>
              </NavLink>
            })
          }
        </div>
      </div>
      {/* --------------------- */}
      <div className={cs(sty.right, 'flex2')}>
        <SearchBox />
        <div className={sty.center}>创作中心</div>
        <Dropdown overlay={menu}>
          <div className={sty.login} onClick={() => !isLogin && dispatch(changeIsShow(true))}>
            {
              isLogin ? <img src={profile.avatarUrl} alt='' /> : '登陆'
            }
            <DownOutlined />
          </div>
        </Dropdown>
      </div>
    </div>
    <div className={sty.redLine}></div>
    <ThemeLogin />
  </div>
}

export default memo(AppHeader)